<template>
	<view :data-theme="theme">
		<!-- 头部 -->
		<view class="print_header">
			<!-- 打印的仓库名称 -->
			<view class="header_top">
				<view class="top_left">
					<view class="warehouse">
						{{optionsData.depotName}}
					</view>
				</view>
				<view class="top_right">
					<view class="print">
						<span v-if="IfLinked == false" @click="toggle('bottom')">未连接</span>
						<span v-else-if="IfLinked == true" @click="toggle('bottom')">已连接</span>
					</view>
					<view class="help">
						帮助
					</view>
				</view>
			</view>

		</view>
		<!-- 设置打印数量 -->
		<view>
			<view class="header_botton">
				设置打印数量
			</view>
			<view style="display: flex;">
				<!-- <u-number-box :min="0" :max="50" v-model="totalCount" @change="numberbox"></u-number-box> -->
				<uni-number-box :min="1" :max="50" v-model="totalCount" @change="numberbox" />
				<text style="line-height: 60rpx;margin-left: 20rpx;" >(每次最多打印50个)</text>
			</view>
		</view>
		
		<!-- 弹窗组件 -->
		<!-- 请选择打印机-提示弹窗 -->
		<popups :bgColor="bgColor" :IfLinked.sync="IfLinked" ref="popupsRefs" :toggleIndex="toggleIndex"
			@goPrintSetting="goPrintSetting"
			></popups>
		
		<view class="footer">
			<button class="bg_color" @click="toPrint('bottom')">打印</button>
		</view>
		
	</view>
</template>

<script>
	import popups from '../components/popups/popups.vue';
	import {
		setThemeColor
	} from "../../../utils/setTheme";
	let app = getApp();
	export default {
		components: {
			popups,
			
		},
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				optionsData: {}, //传过来值
				IfLinked: false,
				totalCount:0,//数值
				// -------
				show: false, //请选择打印机，底部报错弹窗
				IfLinked: false, //打印机是否连接
				//------
				show1: false, //选择连接打印机弹窗
				toggleIndex:1, //1未连接，2选择连接打印机
				
				// -------------
				// -------------
				
			};
		},
		onLoad(options) {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.optionsData = JSON.parse(options.item)

		},
		
		methods: {
			
			close(){
				this.show = false;
				this.show1 = false;
			},
			//去设置打印
			goPrintSetting(ele) {
				console.log(ele)
				this.goPage('/pages/labelPrinting/printSettings/printSettings?item=add')
			},
			
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
            numberbox(e){
				console.log(e.value)
				this.totalCount = e.value;
			},
			// 连接,搜索蓝牙点击事件
			toggle(type, ele) {
				this.toggleIndex = ele;
				this.$refs.popupsRefs.toggle(type,ele); //加载弹窗
				this.$refs.popupsRefs.startSearch(); //搜索蓝牙
			},
			// 去打印，点击事件
			toPrint(type,ele) {
				if (this.IfLinked == false) {
					// this.show = true; //如果未连接打印机，出示弹窗
					this.$refs.popupsRefs.toggle(type);
					this.toggleIndex = ele;
				} else {
					   if(this.totalCount == 0){
						   uni.showToast({
						   	title: '数量不能为0',
						   	icon: 'error',
						   	duration: 2000 // 持续时间为 2 秒
						   });
					   }else{
						   let count = this.totalCount;
						   this.$refs.popupsRefs.sendBleLabelContainerCode(count); //调用组件打印机事件
						   uni.showToast({
						   	title: '打印成功',
						   	icon: 'success',
						   	duration: 2000 // 持续时间为 2 秒
						   });
					   }
				}
			},
		
		}
	}
</script>

<style lang="scss">
	// 头部内容
	.print_header {
		background-color: #fff;
		padding: 0px 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 100rpx;

		// 打印时间以及仓库名称
		.header_top {
			display: flex;
			justify-content: space-between;

			.top_left {
				display: flex;

				view {
					margin-right: 10px;
					font-weight: bold;
				}

			}

			.top_right {
				display: flex;

				view {
					margin-right: 10px;
					font-weight: bold;
				}
			}
		}
	}

	.header_botton {
		font-size: 32rpx;
		font-weight: bold;
		margin: 20rpx;
	}

	// 弹窗
	.popup-content {
		text-align: center;
		background-color: #fff;
	}
	
	.popup-content>text {
		font-size: 30rpx;
		font-weight: bold;
		margin: 20rpx 0;
	}
	
	.popup-height {
		width: 200px;
	}
	
	.ensure {
		// width: 100%;
		background-color: #fff;
		padding-bottom: 22rpx;
		padding-bottom: calc(22rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(22rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	
		.text.title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 50rpx;
		}
		
		.text-left {
			// flex: 1;
			text-align: left;
		}
		
		.center {
			flex: 1;
			text-align: center;
		}
		
		.right {
			color: #808080;
			flex: 1;
			text-align: right;
			font-size: 36rpx;
		}
		
	}
	

	.footer {
		position: fixed;
		bottom: 0rpx;
		width: 100%;
		padding: 10px;
		background-color: #fff;
	}

	.footer button {
		line-height: 92rpx;
		font-weight: bold;
		border-radius: 20rpx;
		text-align: center;
		color: #fff;
		@include main_bg_color(theme);
	}
</style>